<template>
	<view class="page-login" :style="'background-image: url('+ config.login_bc + ')'">
		<view class="logo-box">
			<image class="img" :src="config.logo" mode="scaleToFill"></image>
		</view>
		<view class="form-box">
			<view class="title" :style="'color: '+ config.index_border_color">
				健步走登录
			</view>
			<view class="form">
				<u-input v-model="phone" type="number" :border="true" borderColor="#707070" height="68"
					placeholder="请输入手机" placeholder-style="font-size: 32rpx; color: #C4CAD4; letter-spacing: 4rpx" />
				<view class="code-input">
					<u-input v-model="code" type="number" :border="true" borderColor="#707070" height="68"
						placeholder="请输入验证码"
						placeholder-style="font-size: 32rpx; color: #C4CAD4; letter-spacing: 4rpx" />
					<view class="code-btn" :style="'background-color: ' + config.index_border_color" @click="sendCode">
						{{tips}}
					</view>
				</view>
				<view class="input-box">
					<u-input v-model="realName" type="text" :border="true" borderColor="#707070" height="68"
						placeholder="请输入姓名"
						placeholder-style="font-size: 32rpx; color: #C4CAD4; letter-spacing: 4rpx" />
				</view>
				<view class="input-box">
					<u-input v-model="area" type="select" borderColor="#707070" height="68" placeholder="请选择分区"
						placeholder-style="font-size: 32rpx; color: #C4CAD4; letter-spacing: 4rpx" :border="true"
						@click="showPopup2=true" />
				</view>
				<!-- <view class="input-box">
					<u-input v-model="cmName" type="select" borderColor="#707070" height="68" placeholder="请选择单位"
						placeholder-style="font-size: 32rpx; color: #C4CAD4; letter-spacing: 4rpx" :border="true"
						@click="showPopup=true" />
				</view> -->
			</view>
			<view class="btn-box" :style="'background-color: ' + config.index_border_color" @click="login">
				登录
			</view>
		</view>
		<view class="gzh">
			<official-account></official-account>
		</view>
		<u-popup v-model="showPopup2" mode="right" width="100%" height="100%">
			<view class="search-box" :style="'padding-top:' + paddingTop + 'px'">
				<!-- <u-search v-model="keyWords" placeholder="请输入分区名称" action-text="取消" @change="search"
					@custom="showPopup=false"></u-search> -->
				<scroll-view scroll-y="true" class="list-box">
					<view class="item" :style="{borderColor: config.index_border_color}" v-for="(item, index) in list2"
						:key="index" @click="select2(item)">
						<view class="number-box">
							<view class="name">
								{{item.area}}
							</view>
						</view>
						<view class="step-box">
							<!-- <view class="step" :style="{backgroundColor: config.index_border_color}">
								{{numberFormat(item.)}}步
							</view> -->
							<view class="icon">
								<image class="img" :src="config.list_item_right_icon" mode="scaleToFill"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup v-model="showPopup" mode="right" width="100%" height="100%">
			<view class="search-box" :style="'padding-top:' + paddingTop + 'px'">
				<u-search v-model="keyWords" placeholder="请输入单位名称" action-text="取消" @change="search"
					@custom="showPopup=false"></u-search>
				<scroll-view scroll-y="true" class="list-box">
					<view class="item" :style="{borderColor: config.index_border_color}" v-for="(item, index) in list"
						:key="index" @click="select(item)">
						<view class="number-box">
							<view class="name">
								{{item.company}}
							</view>
						</view>
						<view class="step-box">
							<!-- <view class="step" :style="{backgroundColor: config.index_border_color}">
								{{numberFormat(item.)}}步
							</view> -->
							<view class="icon">
								<image class="img" :src="config.list_item_right_icon" mode="scaleToFill"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-verification-code :seconds="60" ref="uCode" @change="codeChange" change-text="x（s）">
		</u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					list_item_right_icon: '',
					index_border_color: '',
					login_bc: '',
					logo: ''
				},
				list: [],
				list2: [],
				tips: '',
				showPopup: false,
				showPopup2: false,
				phone: '',
				code: '',
				keyWords: '',
				userName: '',
				headImg: '',
				uid: '',
				openId: '',
				cmId: '1',
				cmName: '',
				aid: '',
				area: '',
				realName: '',
				paddingTop: uni.getMenuButtonBoundingClientRect().bottom + 8
			}
		},
		onLoad(e) {
			this.userName = e.userName;
			this.headImg = e.headImg;
			this.uid = e.uid;
			this.openId = e.openId;
			this.search('')
			this.getAreaList()
		},
		methods: {
			async search(keyWords) {
				this.$u.debounce(async () => {
					const [res, err] = await this.$get('xcx/findCompanyList?name=' + keyWords);
					this.list = res.data
				}, 500)
			},
			async getAreaList() {
				const [res, err] = await this.$get('xcx/findAllAreaCompanyList');
				this.list2 = res.data
			},
			select(item) {
				this.cmId = item.cmId;
				this.cmName = item.company;
				this.showPopup = false
			},
			select2(item) {
				this.aid = item.aid;
				this.area = item.area;
				this.showPopup2 = false
			},
			async sendCode() {
				if (!this.$u.test.mobile(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					const [res, err] = await this.$get('xcx/sendVcode?phone=' + this.phone);
					uni.hideLoading()
					if (err) {
						this.$u.toast('验证码发送失败');
						return
					}
					uni.showToast({
						title: '发送成功',
						icon: 'success'
					})
					this.$refs.uCode.start();
				}
			},
			async login() {
				if (!this.$u.test.mobile(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					})
					return
				}
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				if(!this.cmId) {
					uni.showToast({
						title: '请选择战队',
						icon: 'none'
					})
					return
				}
				if(!this.aid) {
					uni.showToast({
						title: '请选择分区',
						icon: 'none'
					})
					return
				}
				const reqData = {
					openId: this.openId,
					phone: this.phone,
					code: this.code,
					realName: this.realName,
					cmId: this.cmId,
					aid: this.aid
				}
				const [res, err] = await this.$post('xcx/loginForm', reqData);
				if(err) {
					// uni.showToast({
					// 	title: '登录失败,请稍后重试',
					// 	icon: 'none'
					// })
					return
				}
				this.setState({
					isLogin: true,
					userInfo: {
						userName: res.data.userName,
						headImg: res.data.headImg,
						uid: res.data.uid,
						openId: res.data.xcxOpenId,
						realName: res.data.realName,
						cmId: 1,
						aid: res.data.aid,
						area: res.data.area,
						company: '',
					}
				})
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			codeChange(text) {
				this.tips = text;
			},
		}
	}
</script>

<style lang="scss">
	.page-login {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: relative;

		.logo-box {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			position: absolute;
			top: 200rpx;

			.img {
				width: 356rpx;
				height: 100rpx;
			}
		}

		.form-box {
			width: 662rpx;
			height: 836rpx;
			padding: 68rpx 70rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx rgba(105, 193, 181, 0.74);
			opacity: 1;
			border-radius: 40rpx;
			position: absolute;
			top: 326rpx;
			left: 50%;
			transform: translateX(-50%);

			.title {
				font-size: 40rpx;
				line-height: 68rpx;
				color: #007FC4;
				text-align: center;
				font-weight: bold;
			}

			.form {
				margin-top: 110rpx;

				.u-input {
					border-radius: 34rpx;
				}

				.input-box {
					margin-top: 30rpx;
				}

				.code-input {
					width: 100%;
					position: relative;
					margin-top: 30rpx;

					.code-btn {
						position: absolute;
						top: 2rpx;
						right: 2rpx;
						width: 150rpx;
						height: 68rpx;
						border-radius: 0 34rpx 34rpx 0;
						line-height: 68rpx;
						border: 2rpx solid rgba(0, 0, 0, 0);
						box-sizing: border-box;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
						z-index: 10;
					}
				}
			}

			.btn-box {
				width: 100%;
				height: 68rpx;
				border-radius: 30rpx;
				line-height: 68rpx;
				text-align: center;
				font-size: 32rpx;
				color: #FFFFFF;
				letter-spacing: 20rpx;
				margin-top: 70rpx;
			}
		}

		.search-box {
			width: 100%;
			height: 100%;
			padding: 130rpx 34rpx;
			box-sizing: border-box;

			.list-box {
				width: 100%;
				margin-top: 40rpx;
				height: calc(100% - 64rpx - 40rpx);

				.item {
					width: 672rpx;
					height: 98rpx;
					border: 2rpx solid #2A83CA;
					border-radius: 20rpx;
					margin: 0 auto 20rpx auto;
					padding: 20rpx 20rpx 20rpx 26rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.number-box {
						display: flex;
						align-items: center;

						.number {
							width: 78rpx;
							height: 58rpx;
							background: #2A83CA;
							opacity: 1;
							font-size: 40rpx;
							line-height: 58rpx;
							color: #FFFFFF;
							text-align: center;
							border-radius: 10rpx;
						}

						.name {
							font-size: 28rpx;
							line-height: 48rpx;
							color: #333333;
							text-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.16);
							margin-left: 18rpx;
						}
					}

					.step-box {
						display: flex;
						align-items: center;

						.step {
							width: 140rpx;
							height: 46rpx;
							background: #2A83CA;
							opacity: 1;
							border-radius: 10rpx;
							font-size: 20rpx;
							line-height: 34rpx;
							color: #FFFFFF;
							line-height: 46rpx;
							text-align: center;
						}

						.icon {
							width: 23rpx;
							height: 29rpx;
							margin-left: 20rpx;

							.img {
								width: 23rpx;
								height: 29rpx;
							}
						}
					}
				}
			}
		}
		
		.gzh {
			width: 100%;
			height: 84px;
			position: fixed;
			left: 0;
			bottom: 0;
		}
	}
</style>
